<template>
  <div>
    <Row :gutter="16">
      <Col span="6">
        <Card dis-hover>
          <div slot="title">
            <a href="javascript:void(0);"><span @click="clickAll">全部用户 >></span></a>
          </div>
          <o-u-tree @click-node="clickNode" :click="connectId!==0"></o-u-tree>
        </Card>
      </Col>
      <Col span="18">
        <Card dis-hover>
          <table-select-common
              ref="tableSelect" v-model="selectedUsers" :columns="columns" :items="items"
              :total-count="totalCount" placeholder="在所属单位、用户名、姓名、Email地址、电话号码中搜索" @on-change="getPage" :tag-show="true"
              display-property="name"
              :page-size="pageSize" :optional="optional"
              :connect-id="connectId" tag-color="success" :loading="$store.state.ou.loading">
          </table-select-common>
        </Card>
      </Col>
    </Row>

  </div>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import OUTree from '@/components/organization-unit/ou-tree.vue';
import TableSelectCommon from '@/components/select/table-select-common.vue';
import UserExpand from '@/components/expand/user-expand.vue';

@Component({
  components: {TableSelectCommon, OUTree},
})
export default class OUUserSelect extends AbpBase {
  name: string = 'OUUserSelect';

  @Prop({type: Array, default: () => []}) value: any[];

  selectedUsers: any[] = [];
  pageSize: number = 10;
  connectId: number = 0;
  optional: any[] = [{key: 'gender', value: []}, {key: 'isActive', value: []}];

  columns = [
    {
      type: 'selection',
      width: 60,
      align: 'center',
    },
    {
      type: 'expand',
      width: 30,
      render: (h: any, params: any) => {
        return h(UserExpand, {
          props: {
            row: params.row,
          },
        }, []);
      },
    },
    {
      title: '所属单位',
      key: 'organizationUnit',
      align: 'center',
      minWidth: 180,
      render: (h: any, params: any) => {
        return h('span', {}, params.row.organizationUnits.map(el => el.displayName).join('，'));
      },
      ellipsis: true,
      tooltipTheme: 'dark',
      tooltip: true,
      resizable: true,
    },
    {
      title: '用户名',
      key: 'userName',
      align: 'center',
      width: 120,
      sortable: this.$config.sorting.administration.user,
      tooltip: true,
      resizable: true,
      ellipsis: true,
      tooltipTheme: 'dark',
    },
    {
      title: '姓名',
      key: 'name',
      align: 'center',
      width: 120,
      sortable: this.$config.sorting.administration.user,
      tooltip: true,
      resizable: true,
      ellipsis: true,
      tooltipTheme: 'dark',
    },
    {
      title: '性别',
      key: 'gender',
      align: 'center',
      render: (h: any, params: any) => {
        if (params.row.gender) {
          return h('Icon', {
            props: {
              size: 20,
              color: this.$config.color.info,
              type: 'pandx fa fa-mars',
            },
          }, []);
        } else {
          return h('Icon', {
            props: {
              size: 20,
              color: this.$config.color.warning,
              type: 'pandx fa fa-venus',
            },
          }, []);
        }
      },
      width: 90,
      filters: [
        {
          label: '男',
          value: 1,
        }, {
          label: '女',
          value: 0,
        },
      ],
      filterRemote: (array) => {
        const index = this.optional.findIndex((item) => {
          return item.key === 'gender';
        });
        if (index !== -1) {
          this.optional.splice(index, 1);
        }
        this.optional.push({key: 'gender', value: array})
      },
      tooltip: true,
      resizable: true,
      ellipsis: true,
      tooltipTheme: 'dark',
    },
    {
      title: '角色',
      key: 'roles',
      align: 'center',
      width: 180,
      render: (h: any, params: any) => {
        return h('span', {}, params.row.roles.map(el => el.roleName).join('，'));
      },
      tooltip: true,
      resizable: true,
      ellipsis: true,
      tooltipTheme: 'dark',
    },
    {
      title: '激活',
      key: 'isActive',
      align: 'center',
      width: 90,
      render: (h: any, params: any) => {
        if (params.row.isActive) {
          return h('Icon', {
            props: {
              size: 20,
              color: this.$config.color.success,
              type: 'pandx fa fa-flash',
            },
          }, []);
        } else {
          return h('Icon', {
            props: {
              size: 20,
              color: this.$config.color.disabled,
              type: 'pandx fa fa-flash',
            },
          }, [])
        }
      },
      filters: [
        {
          label: '已激活',
          value: true,
        }, {
          label: '未激活',
          value: false,
        },
      ],
      filterRemote: (array) => {
        const index = this.optional.findIndex((item) => {
          return item.key === 'isActive';
        });
        if (index !== -1) {
          this.optional.splice(index, 1);
        }
        this.optional.push({key: 'isActive', value: array})
      },
      tooltip: true,
      resizable: true,
      ellipsis: true,
      tooltipTheme: 'dark',
    },
  ];

  @Watch('selectedUsers')
  selectedUsersChange(newVal) {
    this.$emit('input', newVal);
  }



  get totalCount() {
    return this.$store.state.ou.pagedUsers.totalCount;
  }

  get items() {
    return this.$store.state.ou.pagedUsers.items;
  }


  async clickNode() {
    this.connectId = this.$store.state.ou.currentOU.id;
    await this.init();
  }

  async clickAll() {
    this.connectId = 0;
    await this.init();
  }



  async init() {
    await this.getPage({
      sorting: '',
      filter: '',
      maxResultCount: this.pageSize,
      skipCount: 0,
      connectId: this.connectId,
      gender: [],
      isActive: [],
    });
  }

  async getPage(args) {
    await this.$store.dispatch({
      type: 'ou/obtainOrganizationUnitPagedUsers',
      data: args,
    });
  }



  async created() {
    this.connectId=0;
    await this.init()
  }
}
</script>

<style lang="less" scoped>

</style>
